<!-- 群公告 -->
<template>
  <div id="GroupAnnouncement">
    <!-- 头部 -->
    <Head title="群公告" BackType1="true" :NoticeType4="noticetype" v-on:EditorClick="editor"></Head>
    <!-- 主体 -->
    <div id="Main">
      <div v-if="show">
        <img src="../assets/img/announcement.png" alt>
        <span class="PartitionText">管理员还未发布群公告</span>
      </div>
      <div innerHTML="content" v-if="!show"></div>
      <p v-show="!noticetype" class="prompt">
        <span></span>
        仅群主可编辑
        <span></span>
      </p>
    </div>
  </div>
</template>

<script>
import Head from "../components/Head.vue";
export default {
  data() {
    return {
      show: true,
      content:"",
      noticetype:true
    };
  },
  components: {
    Head
  },
  methods: {
    editor() {
      this.$router.push({
        path: "/groupannouncementeditor"
      });
    }
  }
};
</script>

<style lang="less" scoped>
#GroupAnnouncement {
  font-size: 28px;
  #Main {
    position: fixed;
    top: 88px;
    overflow: scroll;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    div {
      img {
        width: 380px;
        height: 380px;
        margin-top: 113px;
      }
      .PartitionText {
        position: absolute;
        top: 380px;
        left: 216px;
        display: block;
        padding-left: 30px;
        margin-bottom: 29px;
        font-size: 24px;
        color: #888888;
      }
    }
    .prompt{
      font-size: 30px;
      color: #999999;
      text-align: center;
      display: flex;
      justify-content: center;
      align-item: center;
      span{
        display: inline-block;
        border-bottom: 1px solid #D6D7DC;
        width: 75px;
        margin: 14px 21px;
      }
    }
  }
}
</style>

